<template>
    <div class="details-box2">
      <div class="title">
        <strong>{{ FinaceUserDetails.bankName }}</strong>
      </div>
      <div class="introduce">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ FinaceUserDetails.introduce }}
      </div>
  
      <div class="title">
        <br />
        <strong>请选择个人贷款还是组合贷款</strong><br />
        <el-button type="success" @click="individual" v-if="!already"
          >个人贷款</el-button
        >
        <el-button type="success" @click="combination" v-if="!already"
          >组合贷款</el-button
        >
        <el-button type="warning" v-if="already" disabled>已申请贷款</el-button>
      </div>
  
      <!--单人贷款 -->
      <el-dialog
        :title="title"
        v-model="showIndividual"
        width="580px"
        :before-close="closeIndividual"
      >
        <el-form
          v-model="FinaceUserDetails"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="FinaceUserDetails.name"></el-input>
          </el-form-item>
          <el-form-item label="融资额度：" prop="money">
            <el-input v-model="FinaceUserDetails.money"></el-input>
          </el-form-item>
          <el-form-item label="利息：" prop="rate">
            {{ FinaceUserDetails.rate }}
          </el-form-item>
          <el-form-item label="意向借款期：" prop="repayment">
            <el-select v-model="value" placeholder="意向借款期：">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式：" prop="phone">
            <el-input v-model="FinaceUserDetails.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="idNum">
            <el-input v-model="FinaceUserDetails.idNum"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeIndividual">取 消</el-button>
          <el-button type="success" @click="handleApplyOne">申请</el-button>
        </span>
      </el-dialog>
  
      <!-- 组合贷款 -->
      <el-dialog
        :title="title"
        v-model="showCombination"
        width="580px"
        :before-close="closeCombination"
      >
        <el-form
          v-model="UserDetailsMulti"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 综合信息 -->
          <strong style="color: green">申请融资信息：</strong>
          <el-form-item label="融资额度：" prop="money">
            <el-input v-model="UserDetailsMulti.money"></el-input>
          </el-form-item>
          <el-form-item label="利息：" prop="rate">
            {{ UserDetailsMulti.rate }}
          </el-form-item>
          <el-form-item label="意向借款期：" prop="repaymentPeriod">
            <el-select v-model="value" placeholder="意向借款期：">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
  
          <!-- 用户1 -->
          <strong style="color: green">用户1：</strong>
          <el-form-item label="姓名：" prop="realName">
            <el-input v-model="UserDetailsMulti.realName"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="phone">
            <el-input v-model="UserDetailsMulti.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="idNum">
            <el-input v-model="UserDetailsMulti.idNum"></el-input>
          </el-form-item>
          <!-- 用户2 -->
          <strong style="color: green">用户2：</strong>
          <el-form-item label="姓名：" prop="combinationName1">
            <el-input v-model="UserDetailsMulti.combinationName1"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="combinationPhone1">
            <el-input v-model="UserDetailsMulti.combinationPhone1"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="combinationIdnum1">
            <el-input v-model="UserDetailsMulti.combinationIdnum1"></el-input>
          </el-form-item>
  
          <!-- 用户3 -->
          <strong style="color: green">用户3：</strong>
          <el-form-item label="姓名：" prop="combinationName2">
            <el-input v-model="UserDetailsMulti.combinationName2"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="combinationPhone2">
            <el-input v-model="UserDetailsMulti.combinationPhone2"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="combinationIdnum2">
            <el-input v-model="UserDetailsMulti.combinationIdnum2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeCombination">取 消</el-button>
          <el-button type="success" @click="handleApplyMulti">申请</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import {  selectFinaceUser, addFinance, addFinanceMulti } from '../api/finance';
  import {useFinanceStore} from '../stores/finance';
  const router = useRouter();
  
  const options = reactive([
    { value: 6, label: '六个月' },
    { value: 12, label: '一年' },
    { value: 24, label: '两年' },
    { value: 36, label: '三年' },
  ]);
  const financeStore=useFinanceStore()
  const value = ref('');
  const already = ref(false);
  const title = ref('个人贷款信息');
  const showIndividual = ref(false);
  const showCombination = ref(false);
  const FinaceUserDetails = reactive({
    bankName: '',
    name: '',
    money: '',
    rate: '',
    repayment: '',
    phone: '',
    idNum: '',
    address: '',
    introduce: '',
  });
  const UserDetailsMulti = reactive({
    money: '',
    rate: '',
    repayment: '',
    realName: '',
    phone: '',
    idNum: '',
    combinationName1: '',
    combinationPhone1: '',
    combinationIdnum1: '',
    combinationName2: '',
    combinationPhone2: '',
    combinationIdnum2: '',
  });
  import{useTokenStore} from '../stores/token'
  const tokenStore=useTokenStore()
  const handleApplyOne = () => {
    
    
    if (tokenStore.token) {
      if (!FinaceUserDetails.name) {
        alert('姓名不能为空');
        return;
      }
      if (!FinaceUserDetails.money) {
        alert('融资额度不能为空');
        return;
      }
      if (!value.value) {
        alert('意向借款期不能为空');
        return;
      }
      if (!FinaceUserDetails.phone) {
        alert('联系方式不能为空');
        return;
      }
      if (!FinaceUserDetails.idNum) {
        alert('身份证号不能为空');
        return;
      }
  
      addFinance({
        bankId: financeStore.finance.bankId,
        realName: FinaceUserDetails.name,
        money: FinaceUserDetails.money,
        rate: FinaceUserDetails.rate,
        repayment: value.value,
        phone: FinaceUserDetails.phone,
        idNum: FinaceUserDetails.idNum,
      })
        .then((res) => {
            console.log(res);
            
          if (res.message==="操作成功") {
            ElMessage.success(res.message);
            localStorage.removeItem('financeObj');
            already.value = true;
            showIndividual.value = false;
          } else {
            ElMessage.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
          ElMessage.error(err.message);
        });
    } else {
      ElMessage.error('请先登录');
      router.push('/login').catch((err) => err);
    }
  };
  
  const handleApplyMulti = () => {
    if (tokenStore.token) {
      if (!UserDetailsMulti.money) {
        alert('融资额度不能为空');
        return;
      }
      if (!value.value) {
        alert('意向借款期不能为空');
        return;
      }
      if (!UserDetailsMulti.realName) {
        alert('姓名不能为空');
        return;
      }
      if (!UserDetailsMulti.phone) {
        alert('联系方式不能为空');
        return;
      }
      if (!UserDetailsMulti.idNum) {
        alert('身份证号不能为空');
        return;
      }
      if (!UserDetailsMulti.combinationName1) {
        alert('用户2姓名不能为空');
        return;
      }
      if (!UserDetailsMulti.combinationPhone1) {
        alert('用户2联系方式不能为空');
        return;
      }
      if (!UserDetailsMulti.combinationIdnum1) {
        alert('用户2身份证号不能为空');
        return;
      }
  
      addFinanceMulti({
        bankId: window.localStorage.financeObj.substring(10, 14),
        money: UserDetailsMulti.money,
        rate: UserDetailsMulti.rate,
        repayment: value.value,
        realName: UserDetailsMulti.realName,
        phone: UserDetailsMulti.phone,
        idNum: UserDetailsMulti.idNum,
        combinationName1: UserDetailsMulti.combinationName1,
        combinationPhone1: UserDetailsMulti.combinationPhone1,
        combinationIdnum1: UserDetailsMulti.combinationIdnum1,
        combinationName2: UserDetailsMulti.combinationName2,
        combinationPhone2: UserDetailsMulti.combinationPhone2,
        combinationIdnum2: UserDetailsMulti.combinationIdnum2,
      })
        .then((res) => {
          if (res.message==="操作成功") {
            ElMessage.success(res.message);
            localStorage.removeItem('financeObj');
            already.value = true;
            showCombination.value = false;
          } else {
            ElMessage.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
          ElMessage.error(err.message);
        });
    } else {
      ElMessage.error('请先登录');
      router.push('/login').catch((err) => err);
    }
  };
  
  const individual = () => {
    title.value = '个人贷款信息';
    selectFinaceUser(
        financeStore.finance.bankId
    ).then((res) => {
      showIndividual.value = true;
      showCombination.value = false;
      if (res.message=='操作成功') {
        Object.assign(FinaceUserDetails, res.data);
      } else {
        ElMessage.error(res.data);
      }
    });
  };
  
  const combination = () => {
    title.value = '组合贷款信息';
    selectFinaceUser(
        financeStore.finance.bankId
    ).then((res) => {
      showCombination.value = true;
      showIndividual.value = false;
      if (res.message=== '操作成功') {
        Object.assign(UserDetailsMulti, res.data);
      } else {
        ElMessage.error(res.data);
      }
    });
  };
  
  const closeIndividual = () => {
    showIndividual.value = false;
  };
  
  const closeCombination = () => {
    showCombination.value = false;
  };


  onMounted(() => {
  
    
    
    selectFinaceUser(
        financeStore.finance.bankId
    ).then((res) => {
        console.log(res);
        
      if (res.message=='操作成功') {
        Object.assign(FinaceUserDetails, res.data);
        console.log("adawda"+FinaceUserDetails);
        
      } else {
        ElMessage.error(res.data);
      }
    });
  });
  </script>
  
  <style lang="less" scoped>
  .details-box2 {
    width: 1300px;
    margin: 10px auto;
    background: #fff;
    min-height: 100%;
    height: auto;
    padding: 10px 20px;
    img {
      width: 300px;
      height: 300px;
      float: left;
      margin-right: 20px;
    }
    .title {
    }
    .introduce {
      max-height: 100px;
    }
    .item-content {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      height: 30px;
      .item-title {
        font-weight: bold;
      }
      .item-text {
      }
    }
    .info {
      position: relative;
      width: 340px;
      height: 300px;
      float: left;
      .title {
        font-weight: bold;
      }
      .content {
        height: 100px;
      }
      .price {
        color: red;
        font-weight: bold;
      }
      .time {
        margin-top: 10px;
        color: #999;
        .createtime {
          float: left;
        }
        .updatetime {
          float: right;
        }
      }
    }
    .operation {
      position: absolute;
      bottom: 0;
      margin-top: 20px;
      .like,
      .collection,
      .comment {
        display: inline-block;
        width: 30px;
        margin-right: 30px;
        img {
          margin: 0;
          width: 20px;
          height: 20px;
          border-radius: 6px;
        }
      }
    }
    .add-shopcart {
      position: absolute;
      right: 20px;
      bottom: 5px;
    }
  }
  .btn-style {
    display: flex;
    justify-content: center;
  }
  </style>